<template>
  <base-breadcrumb :title="$route.meta.title">
    <div id="base-breadcrumb" style="position: relative; z-index: 1">
      <!-- 搜索 -->
      <searchData :searchData="searchArr" @search="search"></searchData>
      <!-- 表格 -->
      <a-card id="tableBox" :bordered="false">
        <title-name :title="$route.meta.title"></title-name>
        <!-- 汇总 -->
        <collapseStatic
          :columnsSummary="columnsSummary"
          :tabList="tabList"
          :form="queryParam"
          :loadCount="loadCount"
          :loadDataSummaryApi="api"
        >
          <template #left="scoped">
            <span
            >检查记录数
              <a
              ><b>{{ scoped.data.total || 0 }}</b></a
              >，</span
            >
            <span
            >合格数
              <a
              ><b>{{ scoped.data.qualifiedNum || 0 }}</b></a
              >，</span
            >
            <span
            >不合格数
              <a
              ><b>{{ scoped.data.unQualifiedNum || 0 }}</b></a
              >，</span
            >
            <span
            >合格率
              <a
              ><b>{{ scoped.data.qualifiedRate || '0%' }}</b></a
              ></span
            >
          </template>
        </collapseStatic>
        <s-table
          ref="table"
          tableLayout="fixed"
          size="default"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <span slot="sort" slot-scope="text, record, index">{{ index + 1 }}</span>
          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleManage(record, 0)">查看</a>
              <!-- <a-divider type="vertical"></a-divider>
                  <a @click="handleManage(record, 1)">编辑</a>
                  <a-divider type="vertical"></a-divider>
                  <a class="del_btn" @click="handleDelete(record)">删除</a> -->
            </template>
          </span>
        </s-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { checkRecord } from '@/api/quality/safe' // api
import CollapseStatic from '@/views/quality/components/CollapseStatic' // 汇总
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目名称
import Selector from '@/components/Select/Selector' // 检查类型
const searchArr = [
  // 搜索框
  {
    name: '分公司',
    type: SelectSubCompany,
    valueKey: 'branchCompanyId',
  },
  // {
  //   name: '项目名称',
  //   type: SelectProject,
  //   valueKey: 'projectId',
  // },
  {
    name: '安全检查编号',
    value: 'checkNumber',
    type: 'input',
  },
  {
    name: '检查结果',
    valueKey: 'checkResult',
    type: Selector,
    selectType: '2',
  },
  {
    name: '检查类型',
    valueKey: 'checkType',
    type: Selector,
    selectType: '0',
    attr: { code: '0' },
  },
  {
    name: '检查人',
    value: 'checkPeople',
    type: 'input',
  },
  {
    name: '检查时间',
    value: 'checkTime',
    type: 'dateRange',
    attr: {
      rangeFormat: ['checkTimeStart', 'checkTimeEnd'],
    },
  },
]
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    scopedSlots: { customRender: 'sort' },
  },
  {
    title: '分公司',
    ellipsis: true,
    dataIndex: 'branchCompanyName',
  },
  {
    title: '项目名称',
    ellipsis: true,
    dataIndex: 'projectName',
  },
  {
    title: '安全检查编号',
    ellipsis: true,
    dataIndex: 'checkNumber',
  },
  {
    title: '检查结果',
    width: 100,
    dataIndex: 'checkResult',
  },
  {
    title: '检查人',
    ellipsis: true,
    dataIndex: 'checkPeople',
  },
  {
    title: '检查类型',
    dataIndex: 'checkType',
  },
  {
    title: '检查时间',
    dataIndex: 'checkTime',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '120px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+ Date.now(),
  components: {
    STable,
    CollapseStatic,
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      queryParam: {}, // 查询参数
      columnsSummary: [
        {
          title: '检查类型',
          dataIndex: 'name',
          ellipsis: true,
        },
        {
          title: '检查总数',
          dataIndex: 'total',
          ellipsis: true,
        },
        {
          title: '合格数',
          dataIndex: 'qualifiedNum',
        },
        {
          title: '不合格数',
          dataIndex: 'unQualifiedNum',
        },
        {
          title: '合格率',
          dataIndex: 'qualifiedRate',
        },
      ], // 汇总表头
      tabList: [
        {
          key: '-1',
          name: '全部',
        },
        {
          key: '0',
          name: '本周',
        },
        {
          key: '1',
          name: '本月',
        },
        {
          key: '2',
          name: '本年',
        },
      ], // 汇总标题
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return checkRecord.getList(requestParameters).then((res) => {
          return res
        })
      },
      loadCount: 0,
      api: checkRecord,
    }
  },
  methods: {
    /**
     * 搜索
     */
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
      this.loadCount++
    },
    /**
     * 操作栏
     */
    handleManage(record, type) {
      this.$router.push({
        name: 'recordInfo',
        query: {
          id: record?.id,
          checkType: '1',
        },
      })
    },
    /**
     * 删除记录
     */
    handleDelete(e) {
      let that = this
      that.$confirm({
        title: '温馨提示',
        content: '确认删除？',
        okText: '确认',
        cancelText: '关闭',
        onOk() {
          return checkRecord
            .remove({
              id: e.id,
            })
            .then((res) => {
              // if (res.data.code == 200) {
              that.$message.success('删除成功')
              // 重置页面
              that.$refs.table.loadData()
              // } else {
              //     that.$message.warning('删除失败！')
              // }
            })
        },
      })
    },
  },
}
</script>


